<template>
  <div>
    <div class="ba_f outmain">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="评价管理" name="evaluate"></el-tab-pane>
        <el-tab-pane label="评价标签" name="evaluatelabel"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="outmain ba_f">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>评价标签</span>
        </div>
      </div>
      <div>
        <el-button type="primary" size="medium" @click="handleEdit">新增标签</el-button>
        <el-button size="medium" @click="handleDelete">批量删除</el-button>
      </div>
      <div class="tabledata mar_t20">
        <el-table
            v-loading="listLoading"
            :data="list"
            :element-loading-text="elementLoadingText"
            stripe
            row-key="id"
            style="width: 100%"
            @selection-change="setSelectRows">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
          >

          </el-table-column>
          <el-table-column
              prop="id"
              label="ID"
          >

          </el-table-column>
          <el-table-column
              prop="name"
              label="标签名称"
          >
          </el-table-column>
          <el-table-column
              label="状态"
          >
            <template slot-scope="scope">
              <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                         @change="changeSwitch(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
        <edit ref="edit" @fetchData="fetchData"></edit>
      </div>
    </div>
  </div>
</template>
<script>
import Edit from "./components/gspecedit";
import {labelist, saveLabel, modifyLabel} from "@/api/good";

export default {
  components: {Edit},
  created() {
    this.fetchData();
  },
  data() {
    return {
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      activeName:'evaluatelabel',
    }
  },
  methods: {
    handleClick(){
      if(this.activeName=='evaluate'){
        this.$router.push({ path: 'evaluate' });
      }else if(this.activeName=='evaluatelabel'){
        this.$router.push({ path: 'evaluatelabel' });
      }
    },
    async fetchData() {
      const {data, count} = await labelist({page: this.page.currentPage,store:'',});
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs["edit"].showEdit(row);
      } else {
        this.$refs["edit"].showEdit();
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const {msg} = await modifyLabel({id: row.id,type:2});
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm("你确定要删除选中项吗", null, async () => {
            const {msg} = await modifyLabel({id,type:2});
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          this.$baseMessage("未选中任何行", "error");
          return false;
        }
      }
    },
    async changeSwitch(row) {
      const {msg} = await modifyLabel({id: row.id, display: row.display,type:1});
      this.$baseMessage(msg, "success");
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
  }
}
</script>
